<template>
	<div class="recommend-list bg-white">
		<div class="recommend-list" v-if='recommand.length > 0'>
			<ul class="pl30rem pr30rem list-ul layout flex-w"  v-infinite-scroll="loadRecommand" infinite-scroll-disabled="loading" infinite-scroll-distance="10" v-if="flag"> 
			 	<li class="mb40rem" v-for="(item,index) in recommand" :key='index' @click="jumpDetail(item)">
			 		<div style="position:relative" v-if="item.activity_cate == '4'">
				 		<img class="responsive-img shop-img" :src=" img_url + item.pic_cover"alt="">
						<p class="fs36rem circle pl10rem pr10rem pt5rem pb5rem white" style="position:absolute;left:5px; bottom:5px; background-color:#F8474E;opacity:.8;">拼</p>
			 		</div>
			 		<img class="responsive-img shop-img" :src=" img_url + item.pic_cover"alt="" style="mim-height:13.07rem;" v-else>
			 		<p class="mt20rem fs30rem c333 bold ellipsis">{{  item.goods_name }}</p>
			 		<div style="min-height:2rem;">
						<p class="white pt5rem pb5rem pr10rem pl10rem mr10rem bg-red fs20rem radius" style="display: inline-block;" v-if="item.brand_name">{{ item.brand_name }}</p>
					</div>
			 		<p class="pt10rem pb10rem">
			 			<strong class="mr5rem fs34rem red bold" v-if="item.activity_cate == '4'">￥{{ item.ping_price }}</strong>
			 			<strong class="mr5rem fs34rem red bold" v-else>￥{{ item.price }}</strong>
			 			<i class="red fs16rem experience" v-if="item.activity_cate != '4'">预售价</i>
			 		</p>	
			 		<div class="layout pt10rem pb10rem">
						<del class="fs20rem c999">原价:{{ item.market_price }}元</del>
					</div>
					<div class="layout">
						<strong class="fs20rem c38 flex-center">预约倒计时</strong>
						<countdown :data="item.count_down" :type="true"></countdown>
					</div>
			 	</li>
			</ul>
		</div>
	</div>
</template>

<script>
import { getRecommand } from "@/api/home";
import Countdown from "@/components/Countdown";
import { InfiniteScroll } from 'mint-ui';	
import $toast from "@/utils/toast";
	export default{
		name:'Recommend',
		components: {
			Countdown,
		},
		directives:{
			InfiniteScroll
		},
		data()
		{
			return{
				img_url    : process.env.IMG_URL,
				page_index : 1,
				recommand  : [],
				loading    : true,
				flag       : true,
			}
		},
		created()
		{
			this.loadRecommand();
		},
		methods:
		{
			loadRecommand()
			{
				this.loading = true;
				var params = {
					type       : 2,
					page_index : this.page_index++,
					page_size  : 10
				}
				getRecommand(params).then(res => {
					if(res.data.length > 0 )
					{
						this.recommand = this.recommand.concat(res.data);
						this.loading = false;
					}
					else if (params.page_index > 1)
					{
						$toast('没有更多了');
					}
					else
					{
						this.flag = false;
					}
					if(res.data.length < params.page_size)
					{
						this.loading = true;
					}
				})
			},
			jumpDetail(item)
			{
				if(item.activity_cate == '4')
					this.$router.push('/ordering/detail/group-detail/' + item.goods_id + '?ping=1');
				else
					this.$router.push('/ordering/detail/commodity-detail/' + item.goods_id);
			}
		}
	}
</script>

<style lang="less">
	.recommend-list{
		.shop-img{
			height: 300/28rem;
		}
	}
</style>
